<template>
  <div class="error-404">
    <!-- 代码撕裂背景 -->
    <div class="code-tear-bg" ref="codeTearBg">
      <!-- 代码片段 -->
      <div class="code-fragment" v-for="(fragment, index) in codeFragments" :key="index"
           :style="{ 
             left: fragment.x + '%', 
             top: fragment.y + '%',
             animationDelay: fragment.delay + 's'
           }">
        <pre class="code-text">{{ fragment.code }}</pre>
      </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="error-content">
      <!-- 故障化的错误代码 -->
      <div class="error-code">
        <h1 class="glitch-text" data-text="404" ref="errorTitle">{{ error.statusCode || 404 }}</h1>
        <div class="glitch-overlay"></div>
      </div>
      
      <!-- 错误信息 -->
      <div class="error-info" ref="errorInfo">
        <h2 class="error-title">{{ getErrorTitle() }}</h2>
        <p class="error-message">{{ getErrorMessage() }}</p>
        
        <!-- 撕裂的代码展示 -->
        <div class="torn-code-display">
          <div class="code-line torn-line">
            <span class="line-number">42:</span>
            <span class="code-content">const page = require('./missing-page')</span>
            <div class="tear-effect"></div>
          </div>
          <div class="code-line torn-line">
            <span class="line-number">43:</span>
            <span class="code-content error-highlight">// Error: Module not found</span>
            <div class="tear-effect"></div>
          </div>
          <div class="code-line torn-line">
            <span class="line-number">44:</span>
            <span class="code-content">export default NotFound</span>
            <div class="tear-effect"></div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="error-actions" ref="errorActions">
          <NuxtLink to="/" class="action-btn primary">
            <span class="btn-icon">🏠</span>
            返回首页
          </NuxtLink>
          <button @click="refreshPage" class="action-btn secondary">
            <span class="btn-icon">🔄</span>
            刷新页面
          </button>
        </div>
      </div>
    </div>
    
    <!-- 代码粒子效果 -->
    <div class="code-particles" ref="particlesContainer"></div>
    
    <!-- 撕裂线条效果 -->
    <div class="tear-lines">
      <div class="tear-line" v-for="n in 8" :key="n" 
           :style="{ 
             left: Math.random() * 100 + '%',
             animationDelay: Math.random() * 2 + 's'
           }"></div>
    </div>
    
    <!-- 布匹撕裂区域 -->
    <div class="fabric-tear-zone">
      <div class="fabric-tear" v-for="n in 4" :key="'fabric-' + n"
           :style="{
             top: Math.random() * 80 + 10 + '%',
             left: Math.random() * 80 + 10 + '%',
             animationDelay: Math.random() * 3 + 's'
           }"></div>
    </div>
    
    <!-- 撕裂边缘 -->
    <div class="tear-edges">
      <div class="tear-edge" v-for="n in 6" :key="'edge-' + n"
           :style="{
             top: Math.random() * 100 + '%',
             left: Math.random() * 100 + '%',
             animationDelay: Math.random() * 2 + 's'
           }"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { gsap } from 'gsap'

// 接收错误对象
const props = defineProps({
  error: Object
})

// 使用独立布局，不显示头部和音乐播放器
definePageMeta({
  layout: false
})

// 响应式数据
const codeTearBg = ref(null)
const errorTitle = ref(null)
const errorInfo = ref(null)
const errorActions = ref(null)
const particlesContainer = ref(null)

// 动画引用
let tearAnimation, particleAnimation

// 代码片段数据
const codeFragments = ref([
  {
    code: `function findPage(url) {
  return routes.find(r => r.path === url)
}`,
    x: 10, y: 15, delay: 0
  },
  {
    code: `// ERROR: Cannot read property 'component'
// of undefined at line 404`,
    x: 70, y: 25, delay: 0.5
  },
  {
    code: `try {
  renderPage(component)
} catch (error) {
  throw new NotFoundError()
}`,
    x: 5, y: 60, delay: 1
  },
  {
    code: `const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // Missing route definition
]`,
    x: 60, y: 70, delay: 1.5
  },
  {
    code: `console.error('404 - Page not found')
process.exit(1)`,
    x: 25, y: 85, delay: 2
  }
])

// 获取错误标题
function getErrorTitle() {
  const statusCode = props.error?.statusCode || 404
  switch (statusCode) {
    case 404:
      return '页面走丢了'
    case 500:
      return '服务器出错了'
    case 403:
      return '访问被拒绝'
    default:
      return '出现错误了'
  }
}

// 获取错误信息
function getErrorMessage() {
  const statusCode = props.error?.statusCode || 404
  switch (statusCode) {
    case 404:
      return '看起来这个页面在代码重构中被意外删除了'
    case 500:
      return '服务器内部出现了问题，请稍后再试'
    case 403:
      return '您没有权限访问这个页面'
    default:
      return '发生了一个意外错误，请尝试刷新页面'
  }
}

// 页面 SEO
useHead({
  title: `${props.error?.statusCode || 404} - 页面错误`,
  meta: [
    { name: 'description', content: '抱歉，您访问的页面出现了问题' }
  ]
})

// 创建代码粒子效果
function createCodeParticles() {
  if (!particlesContainer.value) return

  const particleCount = 30
  const codeChars = ['<', '>', '{', '}', '(', ')', '[', ']', ';', '=', '+', '-', '*', '/', '&', '|', '!', '?']
  
  for (let i = 0; i < particleCount; i++) {
    const particle = document.createElement('div')
    particle.className = 'code-particle'
    particle.textContent = codeChars[Math.floor(Math.random() * codeChars.length)]
    particle.style.left = Math.random() * 100 + '%'
    particle.style.top = Math.random() * 100 + '%'
    particle.style.animationDelay = Math.random() * 3 + 's'
    particle.style.animationDuration = (3 + Math.random() * 2) + 's'
    
    // 随机字体大小
    particle.style.fontSize = (12 + Math.random() * 8) + 'px'
    
    particlesContainer.value.appendChild(particle)
  }
}

// 代码撕裂动画
function startTearAnimation() {
  // 代码片段撕裂效果
  tearAnimation = gsap.timeline({ repeat: -1, repeatDelay: 3 })
  
  tearAnimation
    .to('.code-fragment', {
      duration: 0.1,
      x: () => Math.random() * 20 - 10,
      y: () => Math.random() * 20 - 10,
      rotation: () => Math.random() * 10 - 5,
      stagger: 0.05,
      ease: 'power2.inOut'
    })
    .to('.code-fragment', {
      duration: 0.1,
      x: 0,
      y: 0,
      rotation: 0,
      stagger: 0.05,
      ease: 'power2.inOut'
    })
  
  // 撕裂线条动画
  gsap.to('.torn-line .tear-effect', {
    duration: 2,
    scaleX: () => 0.8 + Math.random() * 0.4,
    x: () => Math.random() * 10 - 5,
    repeat: -1,
    yoyo: true,
    stagger: 0.3,
    ease: 'power2.inOut'
  })
  
  // 代码粒子动画
  particleAnimation = gsap.to('.code-particle', {
    duration: 5,
    x: () => Math.random() * 100 - 50,
    y: () => Math.random() * 100 - 50,
    rotation: () => Math.random() * 360,
    opacity: () => 0.3 + Math.random() * 0.7,
    repeat: -1,
    yoyo: true,
    stagger: 0.1,
    ease: 'power2.inOut'
  })
}

// 故障文字动画
function startGlitchAnimation() {
  gsap.to('.glitch-text', {
    duration: 0.1,
    x: () => Math.random() * 10 - 5,
    y: () => Math.random() * 10 - 5,
    repeat: -1,
    repeatDelay: 2,
    yoyo: true,
    ease: 'power2.inOut'
  })
}

// 刷新页面
function refreshPage() {
  gsap.to('.error-404', {
    duration: 0.5,
    opacity: 0,
    scale: 0.9,
    ease: 'power2.inOut',
    onComplete: () => {
      window.location.reload()
    }
  })
}

// 响应式处理
function handleResize() {
  // 重新定位代码片段
  codeFragments.value.forEach(fragment => {
    fragment.x = Math.random() * 80 + 10
    fragment.y = Math.random() * 80 + 10
  })
}

// 组件挂载
onMounted(() => {
  // 创建粒子效果
  createCodeParticles()
  
  // 入场动画序列
  const tl = gsap.timeline()
  
  tl.fromTo(errorTitle.value, 
    { scale: 0, rotation: 180, opacity: 0 },
    { scale: 1, rotation: 0, opacity: 1, duration: 1, ease: 'back.out(1.7)' }
  )
  .fromTo(errorInfo.value,
    { opacity: 0, y: 50 },
    { opacity: 1, y: 0, duration: 0.8, ease: 'power3.out' }, '-=0.5'
  )
  .fromTo('.code-fragment',
    { opacity: 0, scale: 0.5, rotation: 45 },
    { 
      opacity: 1, 
      scale: 1, 
      rotation: 0,
      duration: 0.6, 
      stagger: 0.2,
      ease: 'back.out(1.7)' 
    }, '-=0.3'
  )
  .fromTo('.torn-code-display',
    { opacity: 0, x: -50 },
    { opacity: 1, x: 0, duration: 0.8, ease: 'power3.out' }, '-=0.2'
  )
  .fromTo(errorActions.value,
    { opacity: 0, y: 30 },
    { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out' }, '-=0.2'
  )
  
  // 启动持续动画
  setTimeout(() => {
    startTearAnimation()
    startGlitchAnimation()
  }, 2000)
  
  // 错误代码光晕效果
  gsap.to(errorTitle.value, {
    textShadow: '0 0 30px #ff4444, 0 0 60px #ff4444',
    duration: 2,
    yoyo: true,
    repeat: -1,
    ease: 'power2.inOut'
  })
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 组件卸载
onUnmounted(() => {
  if (tearAnimation) tearAnimation.kill()
  if (particleAnimation) particleAnimation.kill()
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.error-404 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, #1a1a1a 0%, #000000 100%);
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: white;
  z-index: 9999;
}

/* 代码撕裂背景 */
.code-tear-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.code-fragment {
  position: absolute;
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 4px;
  padding: 0.5rem;
  backdrop-filter: blur(2px);
  transform-origin: center;
  animation: fragmentFloat 8s infinite linear;
}

.code-text {
  color: #00ff88;
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0;
  white-space: pre-wrap;
  text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
}

@keyframes fragmentFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% { 
    transform: translateY(-20px) rotate(2deg);
    opacity: 0.9;
  }
}

/* 主要内容 */
.error-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  max-width: 800px;
  width: 90%;
}

/* 故障化的错误代码 */
.error-code {
  position: relative;
  margin-bottom: 2rem;
}

.glitch-text {
  font-size: 8rem;
  font-weight: bold;
  color: #ff4444;
  margin: 0;
  position: relative;
  text-shadow: 
    0.05em 0 0 #00fffc,
    -0.05em -0.025em 0 #ff0040,
    0.025em 0.05em 0 #ffff00;
  animation: glitchPulse 3s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  animation: glitchBefore 2s infinite;
  color: #ff0040;
  z-index: -1;
}

.glitch-text::after {
  animation: glitchAfter 3s infinite;
  color: #00fffc;
  z-index: -2;
}

@keyframes glitchPulse {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitchBefore {
  0%, 100% { transform: translate(0); opacity: 0.8; }
  15% { transform: translate(-5px, -2px); opacity: 0.6; }
  30% { transform: translate(3px, 2px); opacity: 0.4; }
  45% { transform: translate(-2px, 3px); opacity: 0.7; }
  60% { transform: translate(4px, -1px); opacity: 0.5; }
  75% { transform: translate(-3px, -2px); opacity: 0.9; }
}

@keyframes glitchAfter {
  0%, 100% { transform: translate(0); opacity: 0.7; }
  25% { transform: translate(2px, -3px); opacity: 0.5; }
  50% { transform: translate(-4px, 1px); opacity: 0.3; }
  75% { transform: translate(3px, 4px); opacity: 0.8; }
}

/* 错误信息 */
.error-title {
  font-size: 2.5rem;
  color: #ffffff;
  margin: 0 0 1rem 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.error-message {
  font-size: 1.3rem;
  color: #cccccc;
  margin: 0 0 2rem 0;
  line-height: 1.6;
}

/* 撕裂的代码展示 */
.torn-code-display {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  border: 1px solid #333;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.code-line {
  display: flex;
  align-items: center;
  margin: 0.8rem 0;
  position: relative;
  font-family: 'Courier New', monospace;
}

.torn-line {
  position: relative;
}

.torn-line::after {
  content: '';
  position: absolute;
  right: -30px;
  top: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255, 68, 68, 0.3), #ff4444, rgba(255, 68, 68, 0.3), transparent);
  clip-path: polygon(
    0% 0%, 15% 20%, 25% 5%, 35% 25%, 45% 10%, 
    55% 30%, 65% 15%, 75% 35%, 85% 20%, 100% 40%,
    100% 60%, 85% 80%, 75% 65%, 65% 85%, 55% 70%, 
    45% 90%, 35% 75%, 25% 95%, 15% 80%, 0% 100%
  );
  animation: fabricTearEdge 3s infinite;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
}

@keyframes fabricTearEdge {
  0%, 100% { 
    opacity: 0.6; 
    transform: translateX(0) scaleY(1);
    clip-path: polygon(
      0% 0%, 15% 20%, 25% 5%, 35% 25%, 45% 10%, 
      55% 30%, 65% 15%, 75% 35%, 85% 20%, 100% 40%,
      100% 60%, 85% 80%, 75% 65%, 65% 85%, 55% 70%, 
      45% 90%, 35% 75%, 25% 95%, 15% 80%, 0% 100%
    );
  }
  25% { 
    opacity: 0.8; 
    transform: translateX(2px) scaleY(1.05);
    clip-path: polygon(
      0% 5%, 20% 15%, 30% 0%, 40% 20%, 50% 5%, 
      60% 25%, 70% 10%, 80% 30%, 90% 15%, 100% 35%,
      100% 65%, 90% 85%, 80% 70%, 70% 90%, 60% 75%, 
      50% 95%, 40% 80%, 30% 100%, 20% 85%, 0% 95%
    );
  }
  50% { 
    opacity: 1; 
    transform: translateX(-1px) scaleY(0.95);
    clip-path: polygon(
      0% 10%, 10% 25%, 20% 10%, 30% 30%, 40% 15%, 
      50% 35%, 60% 20%, 70% 40%, 80% 25%, 100% 45%,
      100% 55%, 80% 75%, 70% 60%, 60% 80%, 50% 65%, 
      40% 85%, 30% 70%, 20% 90%, 10% 75%, 0% 90%
    );
  }
  75% { 
    opacity: 0.7; 
    transform: translateX(1px) scaleY(1.02);
    clip-path: polygon(
      0% 2%, 18% 18%, 28% 3%, 38% 23%, 48% 8%, 
      58% 28%, 68% 13%, 78% 33%, 88% 18%, 100% 38%,
      100% 62%, 88% 82%, 78% 67%, 68% 87%, 58% 72%, 
      48% 92%, 38% 77%, 28% 97%, 18% 82%, 0% 98%
    );
  }
}

.line-number {
  color: #666;
  margin-right: 1rem;
  min-width: 30px;
}

.code-content {
  color: #00ff88;
  flex: 1;
}

.error-highlight {
  color: #ff6b6b !important;
  text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

.tear-effect {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ff4444;
  transform-origin: center;
  animation: tearPulse 1.5s infinite;
}

@keyframes tearPulse {
  0%, 100% { 
    scaleY: 1; 
    opacity: 0.8; 
    transform: scaleY(1) rotate(0deg);
  }
  25% { 
    scaleY: 1.1; 
    opacity: 0.9; 
    transform: scaleY(1.1) rotate(1deg);
  }
  50% { 
    scaleY: 1.3; 
    opacity: 1; 
    transform: scaleY(1.3) rotate(-1deg);
  }
  75% { 
    scaleY: 1.05; 
    opacity: 0.85; 
    transform: scaleY(1.05) rotate(0.5deg);
  }
}

/* 操作按钮 */
.error-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn.primary {
  background: linear-gradient(45deg, #ff4444, #ff6666);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.action-btn.primary:hover {
  background: linear-gradient(45deg, #ff6666, #ff8888);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.action-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-icon {
  font-size: 1.2rem;
}

/* 代码粒子效果 */
.code-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.code-particle {
  position: absolute;
  color: #00ff88;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  opacity: 0.6;
  animation: particleDrift 5s infinite;
}

@keyframes particleDrift {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.2) rotate(180deg);
  }
}

/* 撕裂线条效果 */
.tear-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tear-line {
  position: absolute;
  width: 3px;
  height: 100vh;
  background: linear-gradient(180deg, 
    transparent, 
    rgba(255, 68, 68, 0.8) 20%, 
    #ff4444 50%, 
    rgba(255, 68, 68, 0.8) 80%, 
    transparent
  );
  animation: tearLineMove 4s infinite linear;
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
  filter: blur(0.5px);
}

@keyframes tearLineMove {
  0% {
    transform: translateY(-100vh) scaleY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(0) scaleY(1) rotate(1deg);
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) scaleY(0) rotate(-1deg);
    opacity: 0;
  }
}

/* 布匹撕裂区域 */
.fabric-tear-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.fabric-tear {
  position: absolute;
  width: 400px;
  height: 200px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 68, 68, 0.1) 40%,
    rgba(255, 68, 68, 0.3) 50%,
    rgba(255, 68, 68, 0.1) 60%,
    transparent 70%,
    transparent 100%
  );
  clip-path: polygon(
    0% 20%, 15% 10%, 25% 25%, 35% 5%, 45% 30%, 
    55% 15%, 65% 35%, 75% 20%, 85% 40%, 100% 25%,
    100% 75%, 85% 60%, 75% 80%, 65% 65%, 55% 85%, 
    45% 70%, 35% 95%, 25% 75%, 15% 90%, 0% 80%
  );
  animation: fabricTear 8s infinite;
  filter: blur(1px);
}

@keyframes fabricTear {
  0%, 100% { 
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0.4;
    clip-path: polygon(
      0% 20%, 15% 10%, 25% 25%, 35% 5%, 45% 30%, 
      55% 15%, 65% 35%, 75% 20%, 85% 40%, 100% 25%,
      100% 75%, 85% 60%, 75% 80%, 65% 65%, 55% 85%, 
      45% 70%, 35% 95%, 25% 75%, 15% 90%, 0% 80%
    );
  }
  25% { 
    transform: translateX(10px) translateY(-5px) rotate(1deg);
    opacity: 0.6;
    clip-path: polygon(
      0% 15%, 20% 5%, 30% 20%, 40% 0%, 50% 25%, 
      60% 10%, 70% 30%, 80% 15%, 90% 35%, 100% 20%,
      100% 80%, 90% 65%, 80% 85%, 70% 70%, 60% 90%, 
      50% 75%, 40% 100%, 30% 80%, 20% 95%, 0% 85%
    );
  }
  50% { 
    transform: translateX(-5px) translateY(10px) rotate(-1deg);
    opacity: 0.8;
    clip-path: polygon(
      0% 25%, 10% 15%, 20% 30%, 30% 10%, 40% 35%, 
      50% 20%, 60% 40%, 70% 25%, 80% 45%, 100% 30%,
      100% 70%, 80% 55%, 70% 75%, 60% 60%, 50% 80%, 
      40% 65%, 30% 90%, 20% 70%, 10% 85%, 0% 75%
    );
  }
  75% { 
    transform: translateX(5px) translateY(-8px) rotate(0.5deg);
    opacity: 0.5;
    clip-path: polygon(
      0% 18%, 18% 8%, 28% 23%, 38% 3%, 48% 28%, 
      58% 13%, 68% 33%, 78% 18%, 88% 38%, 100% 23%,
      100% 77%, 88% 62%, 78% 82%, 68% 67%, 58% 87%, 
      48% 72%, 38% 97%, 28% 77%, 18% 92%, 0% 82%
    );
  }
}

/* 撕裂边缘 */
.tear-edges {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.tear-edge {
  position: absolute;
  width: 150px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 68, 68, 0.8),
    rgba(255, 68, 68, 1),
    rgba(255, 68, 68, 0.8),
    transparent
  );
  clip-path: polygon(
    0% 0%, 20% 100%, 30% 0%, 50% 100%, 60% 0%, 
    80% 100%, 90% 0%, 100% 100%, 100% 0%
  );
  animation: edgeTear 6s infinite;
  filter: blur(0.5px);
}

@keyframes edgeTear {
  0%, 100% { 
    transform: translateX(0) rotate(0deg);
    opacity: 0.6;
    width: 150px;
  }
  25% { 
    transform: translateX(20px) rotate(2deg);
    opacity: 0.8;
    width: 180px;
  }
  50% { 
    transform: translateX(-10px) rotate(-1deg);
    opacity: 1;
    width: 200px;
  }
  75% { 
    transform: translateX(15px) rotate(1deg);
    opacity: 0.7;
    width: 160px;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .glitch-text {
    font-size: 4rem;
  }
  
  .error-title {
    font-size: 2rem;
  }
  
  .error-message {
    font-size: 1.1rem;
  }
  
  .error-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 250px;
  }
  
  .torn-code-display {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .code-fragment {
    font-size: 0.7rem;
    padding: 0.3rem;
  }
}

/* 禁用文字选择 */
.error-404 {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>
